<template>
  <div class="box">
    <van-sticky>
      <MusicBack
        :title="'歌单评论 ' + ' (' + total + ')'"
        :border="false"
        :arrow="true"
        search=""
        text="返回"
      />
      <div class="music_box" @click="comback">
        <div class="img">
          <img :src="bgcImg + '?param=120y120'" alt="" />
        </div>
        <div class="text van-ellipsis">
          <p class="van-ellipsis">{{ msgs }}</p>
          <p class="van-ellipsis">创建者：{{ nickname }}</p>
        </div>
      </div>
     <list-title>在线评论</list-title>
    </van-sticky>
    <div class="comtent_box">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="我是有底线的..."
        @load="onLoad"
      >
        <div class="comment_box" v-for="item in comments" :key="item.id">
          <!-- 个人信息 -->
          <div class="user">
            <div class="title_img">
              <img :src="item.user.avatarUrl + '?param=120y120'" alt="" />
            </div>
            <div class="nikon">
              <p>{{ item.user.nickname }}</p>
              <p>{{ item.timeStr }}</p>
            </div>
            <div class="nice_count">
              <span v-show="item.likedCount > 0">{{ item.likedCount }}</span>
              <span><van-icon name="good-job-o" size="20" /></span>
            </div>
          </div>
          <!-- 评论内容 -->
          <div class="content">
            <p>{{ item.content }}</p>
            <van-divider />
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { GetplayListCommentAPI } from "@/api/api.js";
import MusicBack from "@/components/common/back.vue";
import MusicSidebar from "@/components/common/sidebar.vue";
import ListTitle from "@/components/video/ListTitle";
export default {
  name: "VueMusicPlaylistComment",
  components: {
    MusicBack,
    MusicSidebar,
    ListTitle,
  },
  data() {
    return {
      comments: [],
      loading: false,
      finished: false,
      offsets: 0,
      before: 0,
      total: 0,
      id: this.$route.query.id,
      msgs: this.$route.query.msg,
      bgcImg: this.$route.query.bgcImg,
      nickname: this.$route.query.nickname,
    };
  },

  mounted() {},
  methods: {
    onLoad() {
      if (!this.id) {
        Toast("请求发生了错误");
        this.$router.go("-1");
      }
      // 异步更新数据
      let offset = this.offsets;
      GetplayListCommentAPI({
        id: this.id,
        limit: 20,
        before: offset,
      }).then((res) => {
        if (res.status == 200) {
          this.total = res.data.total;
          this.comments = [...this.comments, ...res.data.comments];
          this.offsets = res.data.comments[19].time;
          this.loading = false;
        }
        if (this.comments.length >= this.total) {
          this.finished = true;
        }
      });
    },
    comback() {
      this.$router.go("-1");
    },
  },
};
</script>

<style lang="less" scoped>
.box /deep/ .van-sidebar {
  width: 100%;
  height: 2.5rem;
  line-height: 2.5rem;
  padding: 0;
}
.box /deep/ .van-sidebar-item {
  padding: 0.625rem 0.9375rem;
  margin-bottom: 0.3125rem;
  width: 100%;
  background-color: #fff;
}
.box /deep/ .van-nav-bar__content {
  background-color: #fff;
  width: 100%;
  height: 2.875rem;
}


.van-divider {
  margin: 0;
  padding: 0;
}
.comtent_box {
  margin: 0.1875rem 0.9375rem;
  .van-divider {
    padding: 0;
    margin-bottom: 0;
    margin-top: 0.625rem;
  }
  .comment_box {
    display: flex;
    flex-direction: column;
    .user {
      display: flex;
      justify-content: space-between;
      height: 2.5rem;
      .title_img {
        width: 2.1875rem;
        height: 2.1875rem;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .nikon {
        flex: 1;
        text-align: left;
        margin-left: 0.625rem;
        p:nth-child(1) {
          font-size: 0.875rem;
          color: #727272;
        }
        p:nth-child(2) {
          font-size: 0.75rem;
          color: #ababab;
        }
      }
      .nice_count {
        width: 5rem;
        height: 3.125rem;
        color: #ababab;
        font-size: 0.875rem;
        text-align: right;
      }
    }
    .content {
      margin-left: 2.6875rem;
      padding-bottom: 0.9375rem;
      p {
        font-size: 0.875rem;
        text-align: left;
        color: #666;
        line-height: 1.5rem;
      }
    }
  }
  .content {
    margin-top: 0.3125rem;
  }
}
.music_box {
  display: flex;
  height: 3.125rem;
  padding: 0.1875rem 0.9375rem;
  padding-bottom: 0;
  background-color: #fff;
  .img {
    width: 3.75rem;
    height: 3.125rem;
    img {
      width: 100%;
      height: 100%;
      border-radius: 0.1875rem;
    }
  }
  .text {
    width: 100%;
    height: 3.125rem;
    text-align: left;
    padding-left: 0.625rem;
    p {
      height: 1.5625rem;
      line-height: 1.5625rem;
      font-size: 1rem;
    }
    p:nth-child(2) {
      font-size: 0.75rem;
      color: #666;
    }
  }
}
</style>